<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https:d3js.org/d3.v3.min.js"></script>
<style>
        .node circle{
            fill:#fff;
            stroke:steelblue;
            stroke-width: 1.5px;
        }
        .node{
            font: 12px sans-serif;
        }
        .link{
            fill:none;
            stroke:#ccc;
            stroke-width: 1.5px;
        }
    </style>
    
</head>
<body>
        <script>
                
var width = 500,
    height = 500;
 
//定义数据转换函数
var tree = d3.layout.tree()
    .size([width,height-300])
//定义对角线生成器diagonal
var diagonal = d3.svg.diagonal()
    .projection(function(d){return [d.y, d.x]})
 
//定义svg
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform","translate(40,0)")
 
//读取json文件，进行绘图
d3.json("ss.json",function(erro,root){
    var nodes = tree.nodes(root);
    var links = tree.links(nodes);
 
    //画点
    var node = svg.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class","node")
        .attr("transform",function(d){return "translate("+ d.y+","+ d.x+")"})
    //加圈圈
    node.append("circle")
        .attr("r",4.5)
    //加文字
    node.append("text")
        .attr("dx",function(d){return d.children?-8:8;})
        .attr("dy",3)
        .style("text-anchor", function (d) {return d.children?"end":"start"})
        .text(function (d) {return d.name})
 
    //画线
    var line = svg.selectAll("link")
        .data(links)
        .enter()
        .append("path")
        .attr("class","link")
        .attr("d",diagonal)
 
 
})
</script>
</body>
</html>